<!-- 分类管理 -->
<template>
  <div>
    <el-card class="box-card">
      <el-table class="category-list" :data="a" style="width: 90%;margin-bottom: 20px;" row-key="id" border lazy
        :load="load" default-expand-all :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" >
        <el-table-column prop="id" label="分类ID" width="120px" align="center">
        </el-table-column>
        <el-table-column prop="name" label="分类名称">
        </el-table-column>
        <el-table-column prop="address" align="center" width="300px">
          <template #header>
            <el-input placeholder="按Enter键添加一级分类" />
          </template>
          <template v-slot="{ row }">
            <el-button :disabled="!row.level" title="添加子分类" size="mini" type="primary" icon="el-icon-plus" />
            <el-button title="修改分类" size="mini" type="primary" icon="el-icon-edit-outline" />
            <el-button title="删除分类" size="mini" type="danger" icon="el-icon-delete" />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'Category',
  data() {
    return {

    }
  },
  methods: {
    getState() {  //获取一级数据
      this.$store.dispatch('category/getCategoryList1')
    },
    async load(row, treeNode, resolve) {
      console.log('闪光灯', row, treeNode)
    }
  },

  mounted() {
    this.getState()
  },
  computed: {
    ...mapState({
      a: (state) => {
        return state.category.getCategoryList1Data
      }
    })
  }
}
</script>

<style lang="scss">
.el-input__inner {
  width: 200px;
  height: 30px;
}
</style>
